import React from "react"
import SearchInput from "../SearchInput"
import { Link } from "react-router-dom"
import "./style.less"

import { connect } from "react-redux";
import { withRouter } from "react-router-dom"

class HomeHeader extends React.Component {

  enterHandle(key){
    this.props.history.push("/search/"+ encodeURIComponent(key) );
  }
  render() {
    return (
      <div id="home-header">
        <Link to="/city" className="home-header-left">
          <span>{ this.props.getCityinfo.cityName }</span>
          <i className="iconfont icon-xiangxia"></i>
        </Link>
        <a className="home-header-right" href="#">
          <i className="iconfont icon-daohanggouwuche"></i>
        </a>
        <div className="home-header-middle">
          <div className="search-container">
            <i className="iconfont icon-sousuo1"></i>
            <SearchInput enterHandle={ this.enterHandle.bind(this) } history={ this.props.history } />
          </div>
        </div>

      </div>
    )
  }
}

// 读
function mapStateToprops(state){
  return {
    getCityinfo:state.cityinfo
  }
}

export default withRouter(connect(
  mapStateToprops
)(HomeHeader))